/*Author: Yuki Yuan
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
@font-face
{
font-family: Cabin-Bold;
src: url(../fonts/Cabin-Bold.otf);
}

@font-face
{
font-family:HelveticaNeueLTPro-Bd;
src: url(../fonts/HelveticaNeueLTPro-Bd.otf);
}

@font-face
{
font-family:HelveticaNeueLTPro-Md;
src: url(../fonts/HelveticaNeueLTPro-Md.otf);
}

@font-face
{
font-family:HelveticaNeueLTPro-Lt;
src: url(../fonts/HelveticaNeueLTPro-Lt.otf);
}

@font-face
{
font-family: Gothic;
src: url(../fonts/Gothic.ttf);
}

@font-face
{
font-family: Gothic-Bold;
src: url(../fonts/GothicB.ttf);
}

@font-face
{
font-family: Raleway;
src: url(../fonts/Raleway-Regular.otf);
}

body,html
{
	font-family:'Gothic-Bold','Raleway', 'Lato', sans-serif;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

p, span
{
	font-family:'Gothic'
}
	
/*-- banner  --*/

.-container
{
	width:70% !important;
	padding-right:0px !important;
	padding-left:0px !important;
	margin:0 auto;
}
.banner-wrapper
{
	background:url("../images/yuki-bg.jpg") no-repeat 0px 0px;
	background-size:cover;
	background-position:center;
	-webkit-background-size: cover;
	-o-background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	height:100%;
	overflow:hidden;
}

.banner-words
{
	width:700px;
	height:300px;
	border-style:solid;
	border-width: 5px;
	margin-top:250px;
	margin-left:10%;
}

.banner-words p
{
	margin-top:70px;
	margin-left:50px;
	font-family:'Gothic-Bold';
	text-transform:Uppercase;
	font-size:50px;

}

.banner-words span
{
	font-family: 'Gothic-Bold';
	margin-top:70px;
	margin-left:50px;
	text-transform:Uppercase;
	font-size:70px;
}

/*-- navigation --*/
.navigation
{
	background-color: rgba(255,255,255, 0.7);
}
/*-- fixed-header --*/
.fixed
{
	position: fixed;
	top: 0;
	width: 100%;
	margin: 0 auto;
	left:0;
	z-index:9999;
}
/*-- //fixed-header --*/
.nav-left{
	width:8%;
	padding:10px;
	overflow:hidden;
	}
.nav-left img{
	height:50px;
	width:auto;
	}
/*-- menu --*/
.nav-right span{
	display:none;
	}
/*-- //menu --*/
.nav-right{
	float:right;
	width:52%
	}
.nav-right ul{
	padding:0;
	margin:0;
	}
.nav-right ul li{
display:inline-block;
}
.nav-right ul li a {
color: #333333;
font-size:16px !important;
font-family:'Gothic-Bold' !important;
margin: 12px 30px;
font-size: 16px;
text-decoration: none;
display: block;
padding-bottom:10px;
padding-top:10px;
}
.nav-right ul li a:hover{
	color:#111111;
	transition:.5s all;
	-webkit-transition:.5s all;
	-moz-transition:.5s all;
	-o-transition:.5s all;
	-ms-transition:.5s all;
	}

/*
.cl-effect-1 a::before,
.cl-effect-1 a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
	margin-right: 15px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.cl-effect-1 a::after {
	margin-left: 15px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}
*/
/*
.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

.cl-effect-1 a:active
{	
	color:red;
}
/*-- //effect --*/

/*-- portfolio --*/
.portfolio-wrapper
{
	margin-top:80px;
	margin-bottom:200px;
	overflow:hidden;
}

.portfolio-container
{
	margin-top:15px;
	overflow:hidden;
}

.portfolio-col
{
	padding: 0;
	width: 32%;
	float:left;
}

.portfolio-item-desc
{	
	width:100px;
	text-align:center;
	height:20px;
	position:absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity:0;
}
.fade-in:hover .portfolio-item-wrapper .portfolio-item-desc
{
	transition: .5s all;
	-webkit-transition: .5s all;
	-o-transition: .5s all;
	-ms-transition: .5s all;
	-moz-transition: .5s all;
	opacity:1.0;
}

span.index
{
	font-family:'Gothic-Bold';
	line-height:38px;
	font-size:38px;
}

p.item
{
	font-family:'Gothic';
	font-size:16px;
}
/*-- //portfolio --*/
/*-- about --*/
.about-wrapper
{
	padding-top:100px;
	padding-bottom:100px;
	overflow:hidden;
	background-color:#F4F4F4;
}
.about-header
{
	width:100%;
	overflow:hidden;
	padding-bottom:100px;
}
.about-row
{
	width:100%;
	overflow:hidden;
	padding:0;
	font-size:0px;
	margin-bottom:50px;
}
.h-center
{
	width:350px;
	text-align:center;
	margin:0 auto;
}
.about-item-image
{
	display:inline-block;
	vertical-align:top;
	background-color:grey;
	width:50%;
	height:auto;
	margin:0;
	padding:0;
}
.about-item-desc
{
	vertical-align:top;
	display:inline-block;
	width:50%;
	height:auto;
	margin:0;
	padding:0;
	overflow:hidden;
}

.about-item-image img
{
	width:100%;
	height:auto;
}

.about-item-desc a, .about-item-desc a:hover
{
	color:black;
	text-decoration:none;
	margin-top:5px;
}

.about-item-desc span:hover
{
	cursor:pointer;
}
p.short
{
	padding-top:80px;
	padding-left:100px;
	padding-right:0px;
	font-size:16px;
	font-family: 'Gothic';
}

.small-padding-top
{
	padding-top:20px !important;
	padding-right:30px !important;
}

 p.detail
{
	padding-top:10px;
	padding-left:120px;
	padding-right:0px;
	font-size:16px;
	display:none;
	font-family: 'Gothic';
}

.left-align
{
	padding-left:100px !important;
}

.about-item-desc .click-span
{
	display:inline-block;
	width:260px;
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;
	font-size:10px;
	margin-top: 40px;
	margin-left:100px;
	padding-left:50px;
	padding-right:50px;
	border-style:solid;
	font-size:15px;
	color:black;
	background-color:#F4F4F4;
	margin-bottom:50px;
	text-transform:uppercase;
	font-family:'Gothic-Bold';
	letter-spacing:3px;
}

span.desc-header
{
	font-size:24px;
	font-family:'Gothic-Bold';
}

span.title
{
	font-family:'Gothic-Bold';
	font-size:18px;
}

.hvr-icon-back:before {
    content: "\f0c1" !important;
}
/*
.about-item-desc .short
{
	height:300px;
	overflow:hidden;
}

.about-item-desc .short span
{
	display:inline-block;	
	font-size:10px;
	margin-top: 40px;
	margin-left:150px;
	padding-left:50px;
	padding-right:50px;
	border-style:solid;
	font-size:15px;
}

.about-item-desc .detail
{
	width:100%;
	height:300px;
	font-size:30px;
	display:none;
}
*/
/*-- //about --*/

/*-- skill --*/
.skill-header
{
	margin-top:30px;
}
.skill-wrapper
{
	background-color:#FFFFF;
}
.skill-item-wrapper
{
	text-align:center;
	padding-top:30px;
	padding-bottom:100px;
}
.skill-item
{
	float:left;
}

.skill-item img
{
	width:50px;
	height:50px;
	margin-left:45px;
	margin-right:45px;
}
/*-- skill --*/